<!-- ???? -->
<template>
  <div class="all">
    <div class="left">
      <img src="../assets/images/logo.png" class="img">
      <span>开源ERP系统</span>
    </div>
    <div class="right">
      <div class="title">欢迎注册ERP管理系统账号</div>
      <a-form ref="addUserForm" :model="userForm" :rules="addUserRules">
        <a-form-item name="username">
          <a-input v-model:value="userForm.username" placeholder="用户名" />
        </a-form-item>
        <a-form-item name="phone" type="number">
          <a-input v-model:value="userForm.phone" placeholder="电话" />
        </a-form-item>
        <a-form-item name="validate">
          <a-input-group compact>
            <a-input v-model:value="userForm.validate" style="width: calc(100% - 64px)" placeholder="请输入验证码"/>
            <a-button type="primary" style="height:36px" :disabled='phoneTest'>发送</a-button>
          </a-input-group>
        </a-form-item>
        <a-form-item name="company">
          <a-input v-model:value="userForm.company" placeholder="公司名称" />
        </a-form-item>
      </a-form>
      <a-button type="primary" style="width:200px; margin-left:calc(50% - 100px)" @click="register">注册</a-button>
      <div class="jump">已有帐号？<p @click="jump">立即登录</p></div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { message } from 'ant-design-vue';
const router = useRouter();

const userForm = reactive({
  username: "",
  phone: "",
  validate: "",
  company: "",
});
const addUserForm = ref(null)
const phoneTest = ref(true)
const addUserRules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    {
      min: 3,max: 10,message: "用户名长度在 3 到 10 个字符之间",trigger: "blur",
    },
  ],
  validate:[
    { required: true, message: "短信验证码", trigger: "blur" }
  ],
  phone: [
    { required: true, message: "请输入电话号码", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: ["blur", "change"],
    },
  ],
  company: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
};

watch(() => userForm.phone,(val)=>{
  phoneTest.value = !val.match(addUserRules.phone[1].pattern)
})
const jump = () => {
  console.log(1111);
  router.push('/')
}
const register = async() => {
  try {
    // 验证表单字段 
  const values = await addUserForm.value.validateFields(); 
    if(values ){
      message.success('注册成功')
      setTimeout(() => {
        router.push('/')
      }, 2000);
    }
  } catch (errors) {}
}
</script>

<style scoped lang="less">
.all {
  display: flex;
  justify-content: space-around;
  .left{
      margin-top: 2%;
    .img{
      width: 26px;
      height: 26px;
      line-height: 26px;
      vertical-align: middle;
      margin-left: -200px;
    }
    span{
      font-weight: 600;
      font-size: 20px;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      margin-left: 10px;
      
    }
  }
  .right {
    margin-top: 10%;
    width: 36%;
    .ant-input {
      // width: 80%;
      height: 36px;
    }
    .title {
      text-align: center;
      font-size: 24px;
      margin-bottom: 40px;
      border-bottom: 1px solid #999;
      padding-bottom: 18px;
      box-sizing: border-box;
      // font-weight: 600;
    }
    .jump {
      text-align: center;
      margin-top: 20px;
      p {
        display: inline-block;
        color: #2f6aff;
      }
      P:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
